<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/pixi.min.js"></script>
    <script src="js/pixi-spine.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
        }

        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            width: 100vw;
            position: fixed;
            top: 0px;
            overflow: hidden;
            background-color: red;

        }

        #spineDiv {
            width: 100%;
            height: 100%;
        }

        #baEffectCanvase {
            position: fixed;
            pointer-events: none;
        }

        #baEffectDiv {
            position: fixed;
            width: 100vw;
            height: 100vh;
        }

        .word {
            position: absolute;
            top: 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 不会自动播放, 非常的不好用 -->
        <embed id="musicPlay" height="0" width="0" type="video/mp4" loop="99" autostart="true"
            src="./data/mp3/Nor - Daily Routine 247.mp3">

        <canvas id="baEffectCanvase"><!-- 这里是点击效果显示层 --></canvas>
    </div>

</body>
<script type="module">
    import baClickEffect from '../js/baEffect/baClickEffect.js'

    const isAnimPlay = true;//是否开启动画播放
    const isClickEffect = true;//是否开启点击效果
    const winkTime = 5000;//眨眼间隔(ms)

    //#region 点击效果
    const clickCanvas = document.querySelector("#baEffectCanvase");
    clickCanvas.width = window.innerWidth;
    clickCanvas.height = window.innerHeight;
    const baEffect = new baClickEffect({ canvas: clickCanvas });
    //#endregion

    //#region 回忆大厅
    const oldWidth = 3460;
    const oldHeight = 2568;
    const inclineX = -1730;
    const inclineY = -315;
    const scaled = 1;

    const spineDifferenceCount = 5;//差分表情总数
    const curExpression = 0;//当前标签Name
    const fileName = "mika_home";
    const stateArr = [
        'Start_Idle_01',
        'Idle_01',
        'Dev_LookEnd_01_M',
        'Dev_Talk_01_M',
        'Dev_Talk_02_M',
        'Dev_Talk_03_M',
        'Dev_Talk_04_M',
        'Dev_Talk_05_M'
    ];

    let animPlay = false;//是否在播出动画
    let curPlayIndex = 0;//动画播出的下标

    //眨眼计时器
    const winkTimer = setInterval(function () {
        if (animPlay == false) {
            app.stage.children[0].state.setAnimation(2, stateArr[2], false);
        }
    }, winkTime);

    //回忆大厅
    const app = new PIXI.Application({
        backgroundColor: 0xFFFFF,
        antialias: false,
        width: oldWidth,
        height: oldHeight,
    });
    app.view.className += "spineDiv";
    app.view.setAttribute("id", "spineDiv");
    document.getElementById('spineView').prepend(app.view);

    //加载spine
    let loader = PIXI.loader.add('ordylan', './data/spine/' + fileName + '/' + fileName + '.json');//OD.json你的json
    loader.load((loader, res) => {
        let ordylan = new PIXI.spine.Spine(res.ordylan.spineData),
            options = [''];
        ordylan.scale.set(1.05);//放大倍数
        ordylan.state.setAnimation(0, stateArr[1], true);//loop你的动画名字 true 为循环播放
        //ordylan.state.setAnimation(1, stateArr[2], false);

        ordylan.x = oldWidth - 1730;//O点在中间,所以xy 坐标 长宽除以二(导出记得把动画放在中央)
        ordylan.y = oldHeight - 310;

        app.stage.addChild(ordylan);
        app.stage.children[0].state.addListener({
            complete: function (e) {
                curPlayIndex++;
                //mika的动画只有五个
                if (curPlayIndex >= 5) {
                    curPlayIndex = 0;
                }
                animPlay = false;
            }
        });

        window.addEventListener('resize', function (e) {
            resize(e.currentTarget.innerWidth, e.currentTarget.innerHeight);
        });
        resize(window.innerWidth, window.innerHeight);
    });
    //#endregion

    //#region bgm
    const musicPlay = document.getElementById('musicPlay');
    //#endregion

    //点击监听
    document.getElementById('app').addEventListener('click', function (e) {
        if (animPlay == false && isAnimPlay == true) {
            animPlay = true;
            app.stage.children[0].state.setAnimation(1, stateArr[curPlayIndex + 3], false);
        }
        const { clientX, clientY } = e;
        if (isClickEffect) {
            baEffect.Trigger([clientX, clientY]);
        }
    })

    //动态调整背景
    function resize(innerWidth, innerHeight) {
        const div = document.getElementById('spineView');
        const canvas = document.getElementById('spineDiv');
        div.style.maxWidth = innerWidth + 'px';
        div.style.minWidth = innerWidth + 'px';
        div.style.maxHeight = innerHeight + 'px';
        div.style.minHeight = innerHeight + 'px';

        const curWH = innerWidth / innerHeight;
        const oldWH = oldWidth / oldHeight;
        if (curWH > oldWH) {
            canvas.style.marginTop = (innerHeight - innerWidth / oldWH) / 2 + 'px';
        } else {
            const w = (innerHeight * oldWH);
            div.style.maxWidth = w + 10 + 'px';
            div.style.minWidth = w + 10 + 'px';
        }

        clickCanvas.width = window.innerWidth;
        clickCanvas.height = window.innerHeight;
        baEffect.setSize(window.innerWidth, window.innerHeight);
    }

    //用于点击效果
    (function ani() {
        baEffect.update();
        requestAnimationFrame(ani);
    })();

</script>

</html>